/**
 * Created by xuelei.kong on 2017/7/16.
 */
var forEach = function (arr, fn) {
    var len = arr.length;
    for (var i = 0; i < len; i++) {
        var tmp = arr[i];
        if (fn.call(tmp, i, tmp) == false) {
            break;
        }
    }

};

function formatDate(date, fmt) {
    var D = new Date(date);
    var o = {
        "M+": D.getMonth() + 1, //月份
        "d+": D.getDate(), //日
        "h+": D.getHours(), //小时
        "m+": D.getMinutes(), //分
        "s+": D.getSeconds(), //秒
        "q+": Math.floor((D.getMonth() + 3) / 3), //季度
        "S": D.getMilliseconds() //毫秒
    };

    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (D.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

var app = new Vue({
    el: '#app',
    data: function () {
        return {
            loadingFlag: false,
            // CurrentMaxKwh:'',//单位时间最多用量
            // CurrentMaxLoad:'',//当前单位时间最大负荷
            // CurrentJian: '',
            // CurrentFeng: '',
            // CurrentPing: '',
            // CurrentGu: '',
            data: {
                CurrentMaxKwh: {
                    Label: "",
                    Value: 0,
                    Data1: 0
                },
                CurrentMaxLoad: {
                    Label: "",
                    Value: 0,
                    Data1: 0
                },
                CurrentJian: 0,
                CurrentFeng: 0,
                CurrentPing: 0,
                CurrentGu: 0,
                Near_30Day_Plan:0,
                Near_30Day_Real:0,
                Near_30Day_TongBi: 0,
                Near_30Day_HuanBi: 0,
                Near_30Day_TongBi_Percent: 0,
                Near_30Day_HuanBi_Percent: 0

            },
            option: {
                    tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    backgroundColor: '#001c22',
                    formatter: function (params) {
                        // console.log(params);
                        return '<div style="padding: 0 5px;">' +
                            '<p style="font-size:14px;color:#00ece0;">' + formatDate(new Date().getTime(), 'yyyy-MM-dd') + ' ' + params[0].axisValueLabel + '</p>' +
                            '<p style="font-size: 12px;color:#FFFF00;"><span style="color:#FFFF00">负荷：</span><i style="color:#FFFF00">' + params[0].value + '</i></p>' +
                            '<p style="font-size: 12px;color:#07f900;"><span style="color:#07f900">用能：</span>' + params[1].value + '</p>' +

                            '</div>'
                    }

                },
                grid: {
                    left: '3%',
                    right: '5%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        name: "名次",
                        axisLine: {
                            lineStyle: {
                                color: '#008078'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#00f3ff'
                            }
                        },

                        type: 'category',
                        data: [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        name: "电量（KWH）",
                        splitLine: {
                            lineStyle: {
                                type: "doote",
                                color: '#4a6b70'

                            }
                        },
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#008078'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#00f3ff'
                            }
                        }
                    },
                    {
                        name: '负荷',
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#008078'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: "doote",
                                color: '#4a6b70'

                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#00f3ff'
                            }
                        }
                    }
                ],
                legend: {
                    top: '5%',
                    align: 'auto',
                    data: [

                        {
                            name: "负荷",
                            icon: 'circle',
                            textStyle: {
                                color: "#FFCC33",
                                fontSize: 12
                            }
                        },
                        {
                            name: "用能",
                            icon: 'square',
                            textStyle: {
                                color: "#00FF99",
                                fontSize: 12
                            }
                        }
                    ]
                },
                series: [
                    {
                        name: '用能',
                        type: 'bar',
                        data: [
                            /*{
                                name:'1212',
                                value:121212
                            }*/
                        ],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    console.log(params);
                                    // build a color map as your need.

                                    var colorList = {
                                        'Jian': '#FF3366',
                                        'Feng': '#FF7ACC',
                                        'Ping': '#33CCFF',
                                        'Gu': '#00FF99'
                                    };

                                    return colorList[params.data.name];
                                }

                            }
                        }

                    },
                    {
                        name: '负荷',
                        type: 'line',
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                color: '#FFCC33'
                            }
                        },
                        data: []


                    }
                ]
            },
            barOption0:{

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    backgroundColor: '#001c22',
                    formatter: function (params) {
                        // console.log(params);
                        return '<div style="padding:0 5px;">' +
                            '<p style="font-size:12px;color:#07f900;">' + params[0].value + '</p>' +
                            '</div>'
                    }

                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        name:'时刻',
                        axisLine: {
                            lineStyle: {
                                color: '#008078'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#00f3ff'
                            }
                        },
                        type : 'category',
                        data : ['昨日','今日','最近7日平均','昨日预测'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#008078'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#00f3ff'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: "doote",
                                color: '#4a6b70'

                            }
                        }

                    }
                ],
                series : [
                    {
                        name:'',
                        type:'bar',
                        barWidth: 20,
                        data:[],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    console.log(params);
                                    var colorList=['#00C8FF','#00FF99','#FF6400','#FF33CC'];

                                    return colorList[params.dataIndex];
                                }

                            }
                        }
                    }
                ]
            },
            barOption1:{
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    backgroundColor: '#001c22',
                    formatter: function (params) {
                        // console.log(params);
                        return '<div style="padding: 0 5px;">' +
                            '<p style="font-size: 12px;color:#07f900;">' + params[0].value + '</p>' +
                            '</div>'
                    }

                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        name:'时刻',
                        axisLine: {
                            lineStyle: {
                                color: '#008078'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#00f3ff'
                            }
                        },
                        type : 'category',
                        data : ['昨日','今日','最近7日平均','昨日预测'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#008078'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#00f3ff'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: "doote",
                                color: '#4a6b70'

                            }
                        }

                    }
                ],
                series : [
                    {
                        name:'',
                        type:'bar',
                        barWidth: 20,
                        data:[],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    console.log(params);
                                    var colorList=['#00C8FF','#00FF99','#FF6400','#FF33CC'];

                                    return colorList[params.dataIndex];
                                }

                            }
                        }
                    }
                ]
            },
            barOption2:{
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    backgroundColor: '#001c22',
                    formatter: function (params) {
                        // console.log(params);
                        return '<div style="padding: 0 5px;">' +
                            '<p style="font-size: 12px;color:#07f900;">' + params[0].value + '</p>' +
                            '</div>';
                    }

                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        name:'时刻',
                        axisLine: {
                            lineStyle: {
                                color: '#008078'

                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#00f3ff'
                            }
                        },
                        type : 'category',
                        data : ['今年','去年','最近3个月平均','上月预测'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#008078'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#00f3ff'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: "doote",
                                color: '#4a6b70'

                            }
                        }

                    }
                ],
                series : [
                    {
                        name:'',
                        type:'bar',
                        barWidth: 20,
                        data:[],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    console.log(params);
                                    var colorList=['#00C8FF','#00FF99','#FF6400','#FF33CC'];

                                    return colorList[params.dataIndex];
                                }

                            }
                        }
                    }
                ]
            },
            lineOption1: {

                title: {
                    text: ''
                }
                ,
                tooltip: {
                    trigger: 'axis',
                    backgroundColor:
                        'rgba(0,0,0,.8)',
                    padding:
                        10,
                    formatter:
                        function (params) {
                            console.log(params);
                            return '<p style="color:#00fff0;font-size:14px;">'+params[0].name+'</p>' +
                                '<p style="color:#00C8FF;font-size: 12px;">'+(params[0].seriesName).replace(/\//g,'-')+': <span>'+params[0].value+'</span></p>' +
                                '<p style="color:#00FF99;font-size: 12px;">'+(params[1].seriesName).replace(/\//g,'-')+': <span>'+params[1].value+'</span></p>' +
                                '<p style="color:#FF6400;font-size: 12px;">'+(params[2].seriesName).replace(/\//g,'-')+':  <span>'+params[1].value+'</span></p>' +
                                '<p style="color:#FF0000;font-size: 12px;">'+(params[3].seriesName).replace(/\//g,'-')+':  <span>'+params[1].value+'</span></p>' +
                                '<p style="color:#00FF00;font-size: 12px;">'+(params[4].seriesName).replace(/\//g,'-')+':  <span>'+params[1].value+'</span></p>' +
                                '<p style="color:#FF33CC;font-size: 12px;">'+(params[5].seriesName).replace(/\//g,'-')+':  <span>'+params[1].value+'</span></p>' +
                                '<p style="color:#FF9966;font-size: 12px;">'+(params[6].seriesName).replace(/\//g,'-')+':  <span>'+params[1].value+'</span></p>' +
                                '</div>'
                        }
                }
                ,
                backgroundColor: "rgba(0, 0, 0, 0.3)",
                legend:
                    {
                        top:"3%",
                        data: [
                            {
                                name: "",
                                icon: 'circle',
                                textStyle: {
                                    color: "#00C8FF",
                                    fontSize: 12
                                }
                            },
                            {
                                name: "",
                                icon: 'circle',
                                textStyle: {
                                    color: "#00FF99",
                                    fontSize: 12
                                }
                            },
                            {
                                name: "",
                                icon: 'circle',
                                textStyle: {
                                    color: "#FF6400",
                                    fontSize: 12
                                }
                            },
                            {
                                name: "",
                                icon: 'circle',
                                textStyle: {
                                    color: "#FF0000",
                                    fontSize: 12
                                }
                            },
                            {
                                name: "",
                                icon: 'circle',
                                textStyle: {
                                    color: "#00FF00",
                                    fontSize: 12
                                }
                            },
                            {
                                name: "",
                                icon: 'circle',
                                textStyle: {
                                    color: "#FF33CC",
                                    fontSize: 12
                                }
                            },
                            {
                                name: "",
                                icon: 'circle',
                                textStyle: {
                                    color: "#FF9966",
                                    fontSize: 12
                                }
                            }
                        ],
                        textStyle:
                            {
                                color: "#00f3ff",
                                fontSize: 18,
                                textStyle: {
                                    color: "#FFCC33",
                                    fontSize: 12
                                }
                            }
                    }
                ,
                grid: {

                    left: '3%',
                    right:
                        '4%',
                    bottom:
                        '3%',
                    containLabel:
                        true
                }
                ,
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                }
                ,
                xAxis: {
                    type: 'category',
                    boundaryGap:
                        false,
                    axisLine:
                        {
                            lineStyle: {
                                color: '#008078'
                            }
                        }
                    ,
                    axisLabel: {
                        textStyle: {
                            color: '#00f3ff'
                        }
                    }
                    ,
                    data: []
                }
                ,
                yAxis: {
                    name: "用电量（KWH）",
                    type:
                        'value',
                    axisLine:
                        {
                            lineStyle: {
                                color: '#008078'
                            }
                        }
                    ,
                    axisLabel: {
                        textStyle: {
                            color: '#00f3ff'
                        }
                    }
                    ,
                    splitLine: {
                        lineStyle: {
                            type: "doote",
                            color:
                                '#4a6b70'

                        }
                    }

                }
                ,
                series: [
                    {
                        name: "",
                        type: 'line',
                        stack: '',
                        itemStyle: {
                            normal: {
                                color: '#00C8FF',
                                lineStyle: {
                                    color: '#00C8FF'
                                }
                            }
                        },
                        data: []
                    },
                    {
                        name: "",
                        type: 'line',
                        stack: '',
                        itemStyle: {
                            normal: {
                                color: '#00FF99',
                                lineStyle: {
                                    color: '#00FF99'
                                }
                            }
                        },
                        data: []
                    },
                    {
                        name: "",
                        type: 'line',
                        stack: '',
                        itemStyle: {
                            normal: {
                                color: '#FF6400',
                                lineStyle: {
                                    color: '#FF6400'
                                }
                            }
                        },
                        data: []
                    },
                    {
                        name: "",
                        type: 'line',
                        stack: '',
                        itemStyle: {
                            normal: {
                                color: '#FF0000',
                                lineStyle: {
                                    color: '#FF0000'
                                }
                            }
                        },
                        data: []
                    },
                    {
                        name: "",
                        type: 'line',
                        stack: '',
                        itemStyle: {
                            normal: {
                                color: '#00FF00',
                                lineStyle: {
                                    color: '#00FF00'
                                }
                            }
                        },
                        data: []
                    },
                    {
                        name: "",
                        type: 'line',
                        stack: '',
                        itemStyle: {
                            normal: {
                                color: '#FF33CC',
                                lineStyle: {
                                    color: '#FF33CC'
                                }
                            }
                        },
                        data: []
                    },
                    {
                        name: "",
                        type: 'line',
                        stack: '',
                        itemStyle: {
                            normal: {
                                color: '#FF9966',
                                lineStyle: {
                                    color: '#FF9966'
                                }
                            }
                        },
                        data: []
                    }
                ]
            },
            //本年用电量分析
            lineOption2: {

                title: {
                    text: ''
                }
                ,
                tooltip: {
                    trigger: 'axis',
                    backgroundColor:
                        'rgba(0,0,0,.8)',
                    padding:
                        10,
                    formatter:
                        function (params) {
                            console.log(params);
                            return '<p style="color:#00fff0;font-size:14px;">'+parseInt(params[0].seriesName)+'-'+params[0].name+'</p>' +
                                '<p style="color:#00FF00;font-size: 12px;">'+(params[0].seriesName).replace(/\//g,'-')+': <span>'+params[0].value+'</span></p>' +
                                '<p style="color:#FF6400;font-size: 12px;">'+(params[1].seriesName).replace(/\//g,'-')+': <span>'+params[1].value+'</span></p>' +
                                '<p style="color:#00fff0;font-size:14px;">'+parseInt(params[2].seriesName)+'-'+params[2].name+'</p>' +
                                '<p style="color:#FFCC33;font-size: 12px;">'+(params[2].seriesName).replace(/\//g,'-')+':  <span>'+params[2].value+'</span></p>' +
                                '<p style="color:#00C8FF;font-size: 12px;">'+(params[3].seriesName).replace(/\//g,'-')+':  <span>'+params[3].value+'</span></p>' +

                                '</div>'
                        }
                }
                ,
                backgroundColor: "rgba(0, 0, 0, 0.3)",
                legend:
                    {
                        top:"3%",
                        data: [
                            {
                                name: "",
                                icon: 'circle',
                                textStyle: {
                                    color: "#00FF00",
                                    fontSize: 12
                                }
                            },
                            {
                                name: "",
                                icon: 'circle',
                                textStyle: {
                                    color: "#FF6400",
                                    fontSize: 12
                                }
                            },
                            {
                                name: "",
                                icon: 'circle',
                                textStyle: {
                                    color: "#FFCC33",
                                    fontSize: 12
                                }
                            },
                            {
                                name: "",
                                icon: 'circle',
                                textStyle: {
                                    color: "#00C8FF",
                                    fontSize: 12
                                }
                            }
                        ],
                        textStyle:
                            {
                                color: "#00f3ff",
                                fontSize: 18,
                                textStyle: {
                                    color: "#FFCC33",
                                    fontSize: 12
                                }
                            }
                    }
                ,
                grid: {

                    left: '3%',
                    right:
                        '4%',
                    bottom:
                        '3%',
                    containLabel:
                        true
                }
                ,
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                }
                ,
                xAxis: {
                    type: 'category',
                    boundaryGap:
                        false,
                    axisLine:
                        {
                            lineStyle: {
                                color: '#008078'
                            }
                        }
                    ,
                    axisLabel: {
                        textStyle: {
                            color: '#00f3ff'
                        }
                    }
                    ,
                    data: []
                }
                ,
                yAxis: {
                    name: "用电量（KWH）",
                    type:
                        'value',
                    axisLine:
                        {
                            lineStyle: {
                                color: '#008078'
                            }
                        }
                    ,
                    axisLabel: {
                        textStyle: {
                            color: '#00f3ff'
                        }
                    }
                    ,
                    splitLine: {
                        lineStyle: {
                            type: "doote",
                            color:
                                '#4a6b70'

                        }
                    }

                }
                ,
                series: [
                    {
                        name: "",
                        type: 'line',
                        stack: '',
                        itemStyle: {
                            normal: {
                                color: '#00FF00',
                                lineStyle: {
                                    color: '#00FF00'
                                }
                            }
                        },
                        data: []
                    },
                    {
                        name: "",
                        type: 'line',
                        stack: '',
                        itemStyle: {
                            normal: {
                                color: '#FF6400',
                                lineStyle: {
                                    color: '#FF6400'
                                }
                            }
                        },
                        data: []
                    },
                    {
                        name: "",
                        type: 'line',
                        stack: '',
                        itemStyle: {
                            normal: {
                                color: '#FFCC33',
                                lineStyle: {
                                    color: '#FFCC33'
                                }
                            }
                        },
                        data: []
                    },
                    {
                        name: "",
                        type: 'bar',
                        stack: '',
                        itemStyle: {
                            normal: {
                                color: '#00C8FF',
                                lineStyle: {
                                    color: '#00C8FF'
                                }
                            }
                        },
                        data: []
                    }
                ]
            }
        }
    },
    mounted: function () {
        //绘制圆环图
        var that = this;
        that.getData();



    },
    methods: {
        getData: function () {
            var that = this;
            that.loadingFlag = true;
            $.ajax({
                url:'http://180.166.106.206:8086/Analysis/TraceData?id=5012',
                // url: '../js/json.json',
                type: "POST",
                dataType: 'json',
                success: function (res) {
                    var arr = [];
                    var itemList = ['Jian', 'Feng', 'Ping', 'Gu'];
                    console.log(res);
                    that.loadingFlag = false;
                    that.data = res.Data;

                    for (var k = 0; k < res.Data.Jian.Labels.length; k++) {
                        arr.push(0);
                        that.option.xAxis[0].data.push(res.Data.Feng.Labels[k].split(' ')[1]);
                    }
                    forEach(res.Data.Jian.Labels, function (i, item) {
                        for (var j = 0; j < itemList.length; j++) {
                            if (res.Data[itemList[j]].Values[i]) {
                                arr[i] = {
                                    name: itemList[j],
                                    value: res.Data[itemList[j]].Values[i]
                                }
                            }
                        }

                    });

                    for(var key in res.Data.TraceLastHour){
                        that.barOption0.series[0].data.push(res.Data.TraceLastHour[key])
                    }
                    for(var key in res.Data.TraceToday){
                        that.barOption1.series[0].data.push(res.Data.TraceToday[key])
                    }
                    for(var key in res.Data.TraceThisMonth){
                        that.barOption2.series[0].data.push(res.Data.TraceThisMonth[key])
                    }
                    that.option.series[0].data = arr;
                    that.option.series[1].data = res.Data.Load.Values;


                    //多折现1
                    that.lineOption1.xAxis.data = (function () {
                        var arr = [];
                        forEach(res.Data.Near7Day[0].Values.Labels, function (i, item) {
                            arr.push(item.split(' ')[1]+":00")

                        });
                        return arr;
                    })();
                    forEach(res.Data.Near7Day, function (i, item) {
                        that.lineOption1.series[i].name = item.Title;
                        that.lineOption1.legend.data[i].name=item.Title;
                        that.lineOption1.series[i].data = item.Values.Values;
                    });

                    //多折现2
                    that.lineOption2.xAxis.data =res.Data.ThisYearPlan.Values.Labels;

                    that.lineOption2.series[0].data=res.Data.ThisYearPlan.Values.Values;
                    that.lineOption2.series[0].name=res.Data.ThisYearPlan.Title;
                    that.lineOption2.legend.data[0].name=res.Data.ThisYearPlan.Title;


                    that.lineOption2.series[1].data=res.Data.ThisYearReal.Values.Values;
                    that.lineOption2.series[1].name=res.Data.ThisYearReal.Title;
                    that.lineOption2.legend.data[1].name=res.Data.ThisYearReal.Title;

                    that.lineOption2.series[2].data=res.Data.LastYearPlan.Values.Values;
                    that.lineOption2.series[2].name=res.Data.LastYearPlan.Title;
                    that.lineOption2.legend.data[2].name=res.Data.LastYearPlan.Title;


                    that.lineOption2.series[3].data=res.Data.LastYearReal.Values.Values;
                    that.lineOption2.series[3].name=res.Data.LastYearReal.Title;
                    that.lineOption2.legend.data[3].name=res.Data.LastYearReal.Title;




                    var myChart = echarts.init(document.getElementById('lastMonthChart'));
                    myChart.setOption(that.option);

                    var bar0 = echarts.init(document.getElementById('hour'));
                    bar0.setOption(that.barOption0);
                    //
                    var bar1 = echarts.init(document.getElementById('day'));
                    bar1.setOption(that.barOption1);

                    var bar2 = echarts.init(document.getElementById('month'));
                    bar2.setOption(that.barOption2);



                    var lineChart = echarts.init(document.getElementById('zjqtfhqx'));
                    lineChart.setOption(that.lineOption1);


                    var lineChart2 = echarts.init(document.getElementById('bnydlfx'));
                    lineChart2.setOption(that.lineOption2);

                    // var hourChart= echarts.init(document.getElementById('hour'));
                    // hourChart.setOption(that.hourOption);


                    forEach($('.svg'), function (i, item) {
                        setTimeout(function () {
                            var value,percent;
                            console.log(item);
                            if(i===0){
                                value=res.Data.Near_30Day_Plan;
                                 percent = value / (res.Data.Near_30Day_Plan+res.Data.Near_30Day_Real);
                                console.log(percent);
                            }else{
                                value=res.Data.Near_30Day_Real;
                                percent = value / (res.Data.Near_30Day_Plan+res.Data.Near_30Day_Real);
                                console.log(percent);

                            }
                            var circle = $(item).find("circle").eq(1);
                            var  perimeter = Math.PI * 2 * 97;
                            circle[0].setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1 - percent));
                        }, 300);
                    });
                    forEach($('.svg2'), function (i, item) {
                        setTimeout(function () {
                            console.log(item);
                            var value;
                            if(i===0){
                                // var value = $(item).data('precent');
                                 value=res.Data.Near_30Day_TongBi_Percent;
                            }else{
                                 value=res.Data.Near_30Day_HuanBi_Percent;
                            }
                            var circle = $(item).find("circle").eq(1);
                            var percent = value / 100, perimeter = Math.PI * 2 * 52;
                            circle[0].setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1 - percent));
                        }, 150);
                    })
                }
            })
        },
        setViewModel: function () {

        }

    }
});

